import React from "react";
import { View, Text, Button, Image } from "react-native";
import { StackNavigator, StatusBar } from "react-navigation";
class LogoTitle extends React.Component {
    render() {
        return (
            <Image
                source={require("./../img/ma.png")}
                style={{ width: 30, height: 30 }}
            />
        );
    }
}

class HomeScreen extends React.Component {
    static navigationOptions = {
        // title: "Home", //设置屏幕的title值
        headerStyle: {
            backgroundColor: "#f4511e"
        },
        headerTintColor: "pink",
        headerTitleStyle: {
            fontWeight: "bold"
        }, //对顶部的style进行设置，同时也可以在统一入口中设置；但是需要在navigationOptions属性中包裹
        headerTitle: <LogoTitle />,
        headerRight: (
            <Button
                onPress={() => alert("This is a button!")}
                title="Info"
                color="#fff"
            />
        )
    };
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center"
                }}
            >
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() =>
                        this.props.navigation.navigate("Details", {
                            itemId: 86,
                            otherParam: "anything you want here"
                        })
                    }
                />
                <Button
                    title="Go to MyModal"
                    onPress={() =>
                        this.props.navigation.navigate("MyModal")
                    }
                />
                
            </View>
        );
    }
}

class DetailsScreen extends React.Component {
    // static navigationOptions = ({ navigation }) => {
    //   const { params } = navigation.state;

    //   return {
    //     title: params ? params.itemId : 'A Nested Details Screen',
    //   }
    // };
    static navigationOptions = ({ navigation }) => {
        const params = navigation.state.params || {};

        return {
            headerTitle: <LogoTitle />,
            headerRight: (
                <Button
                    onPress={params.increaseCount}
                    title="+1"
                    color="#fff"
                />
            )
        };
    };

    componentWillMount() {
        this.props.navigation.setParams({ increaseCount: this._increaseCount });
    }

    state = {
        count: 0
    };

    _increaseCount = () => {
        this.setState({ count: this.state.count + 1 });
    };
    render() {
        //通过路由进行传参
        const { params } = this.props.navigation.state;
        const itemId = params ? params.itemId + 1 : null;
        const otherParam = params ? params.otherParam : null;
        // 当点击过快的时候，itemId任然是还未计算的值，但是页面屏幕增加了
        return (
            <View
                style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center"
                }}
            >
                <Text>Details Screen</Text>
                <Text>itemId: {JSON.stringify(itemId)}</Text>
                <Text>otherParam: {JSON.stringify(otherParam)}</Text>
                <Text>顶部title按钮控制状态：{this.state.count}</Text>
                <Button
                    title="Go to Details... again"
                    onPress={() =>
                        this.props.navigation.navigate("Details", {
                            itemId: itemId
                        })
                    }
                />
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
            </View>
        );
    }
}

class ModalScreen extends React.Component {
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center"
                }}
            >
                <Text style={{ fontSize: 30 }}>This is a modal!</Text>
                <Button
                    onPress={() => this.props.navigation.goBack()}
                    title="Dismiss"
                />
            </View>
        );
    }
}

const MainStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Details: {
            screen: DetailsScreen
        }
    },
    {
        initialRouteName: "Home"
    }
);

const RootStack = StackNavigator(
    {
        Main: {
            screen: MainStack
        },
        MyModal: {
            screen: ModalScreen
        }
    },
    {
        mode: "modal",
        headerMode: "none"
    }
);

export default class App extends React.Component {
    render() {
        return <RootStack />;
    }
}

// 备注：通过navigation组件设置开始的home screen页面，并将其暴露
// navigation能够记录多次跳转一个页面的状态，应该是堆栈到navigate属性下
// 传递到屏幕的属性是可以保留其的值的
